<template>
  <el-card shadow="never" :body-style="{ padding: '10px 25px' }" class="cus-card">
    <el-tabs v-model="activeName" @tab-click="onTabClick">
      <el-tab-pane label="基础信息" name="tab01"></el-tab-pane>
      <el-tab-pane label="大师管理" name="tab02"></el-tab-pane>
      <el-tab-pane label="花絮管理" name="tab03"></el-tab-pane>
      <el-tab-pane label="相册管理" name="tab04"></el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </el-card>
</template>

<script>

export default {
  data() {
    return {
      id: undefined,
      activeName: 'tab01',
      form: {
        name: null
      }
    }
  },
  created() {
    this.id = parseInt(this.$route.params.id)
    this.setTabActive(this.$route)
  },
  methods: {
    onTabClick(node) {
      let routerParam = null
      switch (node.label) {
        case '基础信息':
          routerParam = this.id ? { name: 'invtEdit', params: { id: this.id } } : { name: 'invtCreate' }
          break;
        case '大师管理':
          routerParam = { name: 'invtMasterEdit', params: { id: this.id } }
          break;
        case '花絮管理':
          routerParam = { name: 'invtHxEdit', params: { id: this.id } }
          break;
        case '相册管理':
          routerParam = { name: 'invtMasterEdit', params: { id: this.id } }
          break;
        default:
          break;
      }
      this.$router.push(routerParam)
    },
    setTabActive(router) {
      switch (router.name) {
        case 'invtMasterEdit':
          this.activeName = 'tab02'
          break;
      
        default:
          break;
      }
    }
  },
  watch: {
    $route(router) {
      this.setTabActive(router)
    }
  }
}
</script>

<style lang="scss">
.cus-card {
  min-height: 100%;
  .el-card__header {
    padding: 15px 20px;
  }
}
</style>